<template>
  <div class="grand-child">
    <h3>我是孙组件</h3>
    <ul>
      <li @click="house+=1">房产数量：{{house}}</li>
      <li>手机信息：
        <ol>
          <li @click="phone.brand = '苹果' ">品牌：{{phone.brand}}</li>
          <li>号码：{{phone.number}}</li>
        </ol>
      </li>
      <li>汽车信息：
        <ol>
          <li>颜色：{{car.color}}</li>
          <li>品牌：{{car.brand}}</li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name:'GrandChild',
    inject:['house','phone','car']
  }
</script>

<style lang="less" scoped>
  .grand-child{
    background-color: orange;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
  }
</style>